<template>

    <div class="message">
        <ul v-if="train && train.length">
        <transition-group name="list" tag="p">
            <li class="list-item" v-for="item in train" :key="item.train_date">
                <p class="time">
                    <span>{{ item.train_date.substring(0,10) }}</span>
                </p>
                <div class="card">
                    <h2>{{ item.train_title }}</h2>
                    <p class="tag">{{ item.train_date.substring(5,10)}}</p>
                    <img slot="img" :src="trainImage(item)"/>
                    <yd-cell-group>
                        <yd-cell-item arrow @click.native="showDetail(item)">
                            <span slot="left">
                                关键字：{{ item.train_keywords }}
                            </span>
                            <span slot="right">查看课程</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
            </li>
        </transition-group>
        </ul>

        <div v-else>
            <p class="prompt">
                <span>没有查询到记录</span>
            </p>
        </div>
        <yd-popup v-model="showLesson" position="bottom" height="50%">
            <div class="trainBox">
                <div class="imageBox">
                    <img :src="trainImage(trainInfo)"/>
                </div>
                <div class="trainDesc">
                    <span class="itemname">{{ trainInfo.train_title }}</span><br/>
                    <span class="itemdesc">{{ trainInfo.train_date }}</span>
                </div>
            </div>
            <yd-cell-group class="listBox">
                <yd-cell-item v-for="item in trainInfo.lessons" :key="item.id" arrow @click.native="openLesson(item)">
                    <span slot="left">
                        <yd-icon name="play" size=".28rem"></yd-icon>
                        {{ item.name }}
                    </span>
                </yd-cell-item>
            </yd-cell-group>
        </yd-popup>
    </div>

</template>

<script>
module.exports = {
    created () {
        this.$store.dispatch('getTrain', (data) => {
            const tid = '' + this.$route.params.id
            const item = _.filter(data, {train_id: tid})[0]
            if(item) {
                this.showLesson = true
                this.trainInfo = item
            }
        })
    },
    data () {
        return {
            showLesson: false,
            trainInfo: {}
        }
    },
    computed: {
        train () {
            return this.$store.getters.trainList.list
        }
    },
    methods: {
        trainImage (item) {
            if(item.train_face) {
                return item.train_face
            } else {
                return 'assets/img/default/train.jpg'
            }
        },
        showDetail (item) {
            this.showLesson = true
            this.trainInfo = item
        },
        openLesson (item) {
            this.$router.push({name:'lesson',params:{id:item.id}})
        }
    }
}
</script>

<style scoped>
.trainBox {
    height: 1.4rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.listBox {
    margin-left: 1.4rem;
    margin-top: 1.4rem;
}
.imageBox {
    float: left;
    display: block;
    margin: .2rem;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
}
.imageBox img {
    height: 1rem;
    border-radius: .1rem;
}
.trainDesc {
    padding-top: .3rem;
}
.itemname {
    padding-left: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #000;
}
.itemdesc {
    padding-left: .4rem;
    font-size: .28rem;
    color: #cfcfcf;
}
    .prompt {
        margin: .1rem 0;
        text-align: center;
    }
    .prompt > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
.message {
    padding: 0rem .15rem;
    overflow-y: scroll;
}
    li {
        margin-bottom: .15rem;
    }
    .time {
        margin: .1rem 0;
        text-align: center;
    }
    .time > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
.card {
    background-color: #fff;
    margin: .2rem;
    padding: .3rem;
}
.card > img {
    width: 100%;
    max-height: 3rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
    object-fit: cover;
}
.card > h2 {
    font-size: .38rem;
    font-weight: normal;
}
.card > p {
    font-size: .28rem;
}
.card > .tag {
    font-size: .28rem;
    float: right;
    color: #666;
}
.list-item {
    display: block;
    min-height: 1rem;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>